<template>
  <div class="sidebar-test">
    <h1>侧边栏极简测试页面</h1>
    <p>用于诊断Nginx环境下的侧边栏切换问题</p>
    
    <div class="test-container">
      <!-- 测试按钮 -->
      <div class="test-buttons">
        <button @click="toggleSidebar" :disabled="isToggling">
          {{ isToggling ? '切换中...' : '切换侧边栏' }}
        </button>
        <button @click="resetSidebar">重置侧边栏</button>
        <button @click="clearLogs">清除日志</button>
      </div>
      
      <!-- 侧边栏状态 -->
      <div class="status-section">
        <h3>侧边栏状态</h3>
        <div class="status-info">
          <p><strong>当前状态:</strong> {{ isCollapsed ? '收起' : '展开' }}</p>
          <p><strong>切换次数:</strong> {{ toggleCount }}</p>
          <p><strong>最后切换时间:</strong> {{ lastToggleTime }}</p>
        </div>
      </div>
      
      <!-- 性能监控 -->
      <div class="performance-section">
        <h3>性能监控</h3>
        <div class="performance-info">
          <p><strong>内存使用:</strong> {{ memoryUsage }}</p>
          <p><strong>页面加载时间:</strong> {{ pageLoadTime }}ms</p>
          <p><strong>切换耗时:</strong> {{ toggleDuration }}ms</p>
        </div>
      </div>
      
      <!-- 错误日志 -->
      <div class="error-section">
        <h3>错误日志</h3>
        <div v-if="errors.length === 0" class="no-errors">
          暂无错误
        </div>
        <div v-else class="error-list">
          <div v-for="(error, index) in errors" :key="index" class="error-item">
            <div class="error-time">{{ error.time }}</div>
            <div class="error-message">{{ error.message }}</div>
          </div>
        </div>
      </div>
      
      <!-- 测试日志 -->
      <div class="log-section">
        <h3>测试日志</h3>
        <div class="log-list">
          <div v-for="(log, index) in logs" :key="index" :class="['log-item', log.type]">
            <div class="log-time">{{ log.time }}</div>
            <div class="log-message">{{ log.message }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const isCollapsed = ref(false)
const isToggling = ref(false)
const toggleCount = ref(0)
const lastToggleTime = ref('')
const toggleDuration = ref(0)
const memoryUsage = ref('未知')
const pageLoadTime = ref(0)
const errors = ref([])
const logs = ref([])

// 页面加载时间
const startTime = performance.now()

onMounted(() => {
  pageLoadTime.value = Math.round(performance.now() - startTime)
  updateMemoryUsage()
  addLog('页面加载完成', 'success')
  
  // 监听错误
  window.addEventListener('error', handleError)
  window.addEventListener('unhandledrejection', handleUnhandledRejection)
})

onUnmounted(() => {
  window.removeEventListener('error', handleError)
  window.removeEventListener('unhandledrejection', handleUnhandledRejection)
})

// 更新内存使用情况
const updateMemoryUsage = () => {
  if (performance.memory) {
    const memory = performance.memory
    memoryUsage.value = `${Math.round(memory.usedJSHeapSize / 1024 / 1024)}MB / ${Math.round(memory.totalJSHeapSize / 1024 / 1024)}MB`
  }
}

// 添加日志
const addLog = (message, type = 'info') => {
  logs.value.push({
    time: new Date().toLocaleTimeString(),
    message,
    type
  })
}

// 添加错误
const addError = (message) => {
  errors.value.push({
    time: new Date().toLocaleTimeString(),
    message
  })
}

// 错误处理
const handleError = (event) => {
  addError(`JavaScript错误: ${event.message} (${event.filename}:${event.lineno})`)
}

const handleUnhandledRejection = (event) => {
  addError(`未处理的Promise拒绝: ${event.reason}`)
}

// 极简的侧边栏切换
const toggleSidebar = () => {
  if (isToggling.value) return
  
  const startTime = performance.now()
  isToggling.value = true
  addLog('开始切换侧边栏', 'info')
  
  try {
    // 直接切换状态，无任何复杂逻辑
    isCollapsed.value = !isCollapsed.value
    toggleCount.value++
    lastToggleTime.value = new Date().toLocaleTimeString()
    
    // 计算切换耗时
    setTimeout(() => {
      toggleDuration.value = Math.round(performance.now() - startTime)
      updateMemoryUsage()
      addLog(`侧边栏切换完成，耗时: ${toggleDuration.value}ms`, 'success')
      isToggling.value = false
    }, 0)
    
  } catch (error) {
    addError(`切换侧边栏失败: ${error.message}`)
    isToggling.value = false
  }
}

// 重置侧边栏
const resetSidebar = () => {
  isCollapsed.value = false
  toggleCount.value = 0
  lastToggleTime.value = ''
  toggleDuration.value = 0
  addLog('侧边栏状态已重置', 'info')
}

// 清除日志
const clearLogs = () => {
  logs.value = []
  errors.value = []
  addLog('日志已清除', 'info')
}
</script>

<style scoped>
.sidebar-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.test-container {
  display: grid;
  gap: 20px;
}

.test-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover:not(:disabled) {
  background: #0056b3;
}

button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.status-section,
.performance-section,
.error-section,
.log-section {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #f9f9f9;
}

.status-section h3,
.performance-section h3,
.error-section h3,
.log-section h3 {
  margin-top: 0;
  color: #666;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.status-info,
.performance-info {
  display: grid;
  gap: 8px;
}

.status-info p,
.performance-info p {
  background: white;
  padding: 8px;
  border-radius: 4px;
  margin: 0;
  font-size: 14px;
}

.error-list,
.log-list {
  max-height: 300px;
  overflow-y: auto;
}

.error-item,
.log-item {
  background: white;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
  border-left: 3px solid #dc3545;
}

.log-item.success {
  border-left-color: #28a745;
}

.log-item.info {
  border-left-color: #17a2b8;
}

.log-item.error {
  border-left-color: #dc3545;
}

.error-time,
.log-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.error-message,
.log-message {
  font-size: 14px;
}

.no-errors {
  text-align: center;
  color: #28a745;
  font-style: italic;
}
</style> 